<template>
  <div class="map-list-wrapper">
    <div class="left-map">
      <IndustryMap />
      <!-- <SelectSearch /> -->
    </div>
    <div class="right-list">
      <div v-if="showDetail" class="detail-wrapper webkit-scrollbar">
        <img src="@/assets/img/parkDetail.png" />
      </div>
      <MapRightPart v-else />
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { mapGetters } from 'vuex'
import IndustryMap from '@/components/index/industryMap'
import MapRightPart from '@/components/index/industryMap/MapRightPart'
export default Vue.extend({
  components: { IndustryMap, MapRightPart },
  data() {
    return {}
  },
  head: {
    title: '产业地图',
  },
  computed: {
    ...mapGetters('industryMap', ['parkName']),
    showDetail() {
      return !!this.parkName
    },
  },
})
</script>
<style lang="scss" scoped>
.map-list-wrapper {
  display: flex;
  height: calc(100vh - 80px);
  .left-map {
    flex: 1;
    position: relative;
  }

  .right-list {
    width: 400px;
    height: 100%;
    /* background-color: #ff0; */

    .detail-wrapper {
      padding: 0 20px;
      height: 100%;
      overflow: hidden;
      overflow-y: auto;
    }
  }
}
</style>
